<template>
    <el-tabs v-model="activeName" tab-position="left" class="demo-tabs" @tab-click="handleClick">
        
        <el-tab-pane label="水滴效果" name="waterdrop">
            <waterDrop></waterDrop>
        </el-tab-pane>
        <el-tab-pane label="打字动画" name="typewriter">
            <typeWriter></typeWriter>
        </el-tab-pane>
        <el-tab-pane label="文字穿透" name="textpenetrate">
            <textPenetrate></textPenetrate>
        </el-tab-pane>
    </el-tabs>
</template>
<script setup >
import { ref } from 'vue';
import typeWriter from "@/components/cssDemo/typeWriter.vue";
import waterDrop from "@/components/cssDemo/waterDrop.vue";
import textPenetrate from "@/components/cssDemo/textPenetrate.vue";
const activeName = ref('waterdrop');
const handleClick = (tab, event) => {
    // console.log(tab, event)
}
</script>
<style scoped lang="scss"></style>